<include file="public@header"/>
<!-- <link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/webuploader.css"> -->
<link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/image-upload/style.css">
<style>
    .form-search {
        padding: 19px;
        margin-bottom: 0;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
    }
</style>
</head>
<body>
<div class="layui-fluid js-check-wrap">
    <if condition="$no_head neq 1">
        
    </if>
    
    <div class="layui-card">
        <div class="layui-card-header">
            <h3>{:lang('ADMIN_MATERIAL_LIBRARY')}</h3>
        </div>
        <div class="layui-card-body">
            <div class="form-search layui-form-item clearfix">
                <!-- <input type="button" class="layui-btn layui-btn-danger layui-btn-sm" value="清空" onclick='serachMaterial(1)'/> -->
                <!-- <div class="layui-col-sm6 no-padding"> -->
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="keyword" id="keyword"
                           value="{$keyword|default=''}" placeholder="{:lang('PLEASE_ENTER_KEYWORD')}">
                </div>
                <div class="layui-inline">
                    <input type="button" class="layui-btn layui-btn-normal" value="{:lang('SEARCH')}" onclick='serachMaterial()'/>
                </div>
                <div class="layui-inline"> 
                    <a class="layui-btn  layui-btn-warm inline-block"  href="javascript:materialUploadMultiFile('图片上传', 'image', initData);">
                        <i class="fa fa-image"></i>
                        上传图片
                    </a>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger" href="javascript:batchDeleteFile();">
                        {:lang('DELETE_SELECTED')}
                    </a>
                </div>
            </div>
        </div>

        <div class="layui-tab-content">
            <div class="asset-data"></div>

            <!-- 所在目录面包屑 -->
            <!-- <div class="fdir">
                <dd data-name='' class='top_d'><a href="javascript:;"><i class="fa fa-home"></i> 顶级目录</a></dd>
                <dl class="fdir-sub">
                </dl>
            </div> -->

            <!-- 目录下的文件和文件夹 -->
            <!-- <div class="file-list"></div> -->

            <!-- 分页 -->
            <!-- <div class="pagination page" data-title=''>{$pagination}</div> -->
        </div>
    </div>
</div>


<if condition="$no_head neq 1">
    <script type="text/javascript" src="__STATIC__/js/admin.js"></script>
    </body>
    </html>
</else>
    <include file="public@footer"/>
</if>

<script type="text/javascript">
    var size        = '{$size}';
    var filetype    = '{$filetype}';
    var ajax_url    = '{:url("user/Asset/getAssetData")}';
    var ajax_config = { status : 1 };

    var data = {
        'size':size,
        'type':filetype,
    };

    $(function(){
        initData();
    })

    //初始化数据函数
    function initData(reloads) {
        // var data = { 'id' : f.parent_id };
        if (reloads) {
            ajaxList(ajax_config.urls, dataList, data );
        }else {
            ajaxList(ajax_url, dataList, data);
        }
    }

    //搜索
    function serachMaterial(on){
        if(on){
            data.keyword = '';
            $('#keyword').val('');
        }else{
            if( $('#keyword').val()!='' ){
                data.keyword = $('#keyword').val();
            }
        }

        //获取素材
        ajaxList(ajax_url, dataList, data);
    }
    
    // 获取素材库，回调函数
    function dataList(res){
        $('.asset-data').html(res.html);
        $('.loading').hide();
    }

    //选择文件
    $('.asset-data').on('click','.item-checkbox',function(){
        $(this).toggleClass('item-checkbox-open');
        $(this).parents('.file-item').toggleClass('file-item-open');
    });

    // function file_click(){
    //     console.log($(this));
    //     //防止冒泡
    //     // event.stopImmediatePropagation();
        
    // }

    // //文件点击选中效果
    // function file_click(obj){
    //     return;
    //     if($(obj).find('.item-checkbox').attr('checked') == 'checked'){
    //         $(obj).find('.item-checkbox').attr('checked',false);
    //         $(obj).removeClass('on');
    //         if(filetype == 'file'){
    //             $(obj).find('img').attr('src','__JS__/webuploader/image-upload/f.png');
    //         }
    //     }else{
    //         $(obj).find('.item-checkbox').attr('checked',true);
    //         $(obj).addClass('on');
    //         if(filetype == 'file'){
    //             $(obj).find('img').attr('src','__JS__/webuploader/image-upload/fon.png');
    //         }
    //     }
    // }

    var go =true;
    //单个文件删除
    function deleteFile(_this){
        if(!go) return false;
        
        var id = $(_this).attr('data-id');
        if (id == '' || id == undefined) return false;

        Wind.use("layer", function () {
            layer.confirm('您确定要删除该文件吗？', {icon: 3, title:'提示'}, function(index){
                go = false;
                $('.loading').show();
                $('.self').hide();
                $.post('{:url("user/Asset/deleteAssetData")}',{'id':id},function(res,status){
                    Wind.use("layer", function () {
                        layer.msg(res.message);
                    });
                    if(status =='success'){
                        if(res.status == 1){
                            $(_this).parent().parent().remove();
                        }
                    }else{
                        $('.self').show();
                    }
                    go=true;
                    $('.loading').hide();
                },'json');

                layer.close(index);
            });
        })
    }

    //批量删除文件
    function batchDeleteFile(){
        var ids = [];
        
        Wind.use('ajaxForm', 'artDialog', 'iframeTools', function () {
            if ( $('.item-checkbox-open').length == 0) {
                art.dialog.through({
                    id: 'error',
                    icon: 'error',
                    content: '您没有勾选要删除的文件或文件夹，无法进行操作！',
                    cancelVal: '关闭',
                    cancel: true
                });
                return false;
            }

            Wind.use("layer", function () {
                layer.confirm('您确定要删除该文件吗？', {icon: 3, title:'提示'}, function(index){
                    $(".item-checkbox-open").each(function () {
                        ids.push($(this).find('.asset-id').val());
                    });

                    $.post('{:url("user/Asset/deleteAssetData")}',{'ids':ids},function(res){
                        layer.msg(res.message);

                        if(res.status == 1){
                            $(".item-checkbox-open").each(function(){
                                $(this).parent().remove();
                            })
                        } else{
                            $('.self').show();
                        }

                        $('.loading').hide();
                    },'json');

                    layer.close(index);
                });
            });
        });
    }

    // //文件预览
    // function view_img(_this){
    //     var imgUrl = $(_this).attr('data-title');
    //     if (imgUrl == '' || imgUrl == undefined) return false;
    //     // imgUrl = web_dir+'/'+imgUrl;
    //     imgUrl = "{:cmf_get_image_url('"+imgUrl+"')}";
    //     imgPreview(imgUrl);
    // }

    // //图片预览插件
    // function imgPreview(imgUrl) {
    //     $('body .preview, body .preview-body').remove();
    //     var preview = $('<div class="preview"></div>');
    //     $('body').append(preview);
    //     $('body').append('<div class="preview-body" />');
    //     preview.css({
    //         'left' : $(window).width()/2-preview.width()/2+'px',
    //         'top' : $(window).height()/2-preview.height()/2+'px'
    //     });
    //     var obj = new Image();
    //     obj.src = imgUrl;
    //     obj.onload = function() {
    //         var w = obj.width;
    //         var h = obj.height;
    //         var window_w = $(window).width()-50;
    //         var window_h = $(window).height()-50;
    //         if (w > window_w) {
    //             w = window_w;
    //             var radio = 0; 
    //             radio = w / obj.width;
    //             h = h * radio;
    //         }
    //         if (h > window_h) {
    //             h = window_h;
    //             var radio = 0;
    //             radio = h / obj.height;
    //             w = w * radio;
    //         }
    //         preview.append('<div class="preview-close"></div><img src="'+imgUrl+'" style="width:'+w+'px;" />');
    //         preview.css({
    //             'width' : w+'px',
    //             'height' : h+'px',
    //             'left' : $(window).width()/2-w/2+'px',
    //             'top' : $(window).height()/2-h/2+'px',
    //             'background' : '#fff',
    //             'position' : 'fixed',
    //             'line-height':h+'px',
    //         });
    //         $('body .preview-body, .preview-close').click(function(event) {
    //             event.stopImmediatePropagation();
    //             $('body .preview, body .preview-body').remove();
    //         });
    //     }
    // }


    /*$(function() {
        // $(".file-left").niceScroll({ cursorcolor:"#000", cursorborder:"none", cursoropacitymax : 0.4 });

        //加载右侧当前目录下的文件
        initData();
    });


    var ajax_url = '{:url("user/Asset/getAssetData")}';
    var size     = '{$size}';
    var filetype = '{$filetype}';

    //初始化数据函数
    function initData(reloads) {
        var datas ={
            'size':size,
            'type':filetype,
        };
        if (reloads) {
            ajaxList(ajax_config.urls, dataList, datas );
        }else {
            ajaxList(ajax_url, dataList, datas );
        }
    }

    var ajax_config = { status : 1 };
    function dataList(data) {
        console.log(data);

        var list = data.list;
        var html = '';
        if (list.length > 0 || data.dir_list.length > 0) {
            if (list.length > 0) {
                var lock = '';
                for (x in list) {
                    html = html + '<dl class="file-item file-item-file file-item-'+list[x]['id']+'" data-id="'+list[x]['id']+'">';
                    if (list[x]['is_type'] == 1) {
                        html = html + '<dt><img title="'+list[x]['file_size']+'" src="'+list[x]['thumb_img']+'" data-title="'+list[x]['file_path']+'" /></dt>';
                    }else {
                        html = html + '<dt><img title="'+list[x]['file_size']+'" src="'+list[x]['thumb_img']+'" /></dt>';
                    }
                    html = html + '<dd>'+list[x]['filename']+'</dd>';
                    html = html + '<div class="oper">';
                    html = html + '<a href="javascript:;" class="item-move">移动</a>';
                    html = html + '<a href="/Cloudtube/Material/download?filename='+list[x]['file_path']+'">下载</a>';
                    html = html + '<a href="javascript:;" class="item-del">删除</a>';
                    html = html + '</div><div class="item-checkbox"></div></dl>';
                }
            }
            $('.file-list').html(html);
            $('.pages').html(data.page);
            //文件夹
            // var dir_html = '';
            // var lock = '';
            // for(x in data.dir_list) {
            //     dir_html = dir_html + '<dl class="file-item file-item-dir dir-item-'+data.dir_list[x]['cat_id']+'" data-id="'+data.dir_list[x]['cat_id']+'">';
            //     dir_html = dir_html + '<dt class="dir-bg"></dt>';
            //     dir_html = dir_html + '<dd>'+data.dir_list[x]['cat_name']+'</dd>';
            //     dir_html = dir_html + '<div class="item-checkbox"></div></dl>';
            // }
            // $('.file-list').prepend(dir_html);
        }else {
            html = '<div class="tip"><i class="fa fa-file-text-o"></i>此目录没有相关的文件 ^_^</div>';
            $('.file-list').html(html);
        }

        // //面包屑导航
        // var nav_html = '<li><a href="javascript:;" class="checkbox-all"></a></li>';
        // for (x in data.nav) {
        //     if (x == 0) {
        //         nav_html = nav_html + '<li data-id="'+data.nav[x]['cat_id']+'"><a href="javascript:;"><i class="fa fa-home"></i> '+data.nav[x]['cat_name']+'</a></li>';
        //     }else if ((data.nav.length - 1) == x) {
        //         //最后
        //         nav_html = nav_html + '<li class="active">'+data.nav[x]['cat_name']+'</li>';
        //     }else {
        //         nav_html = nav_html + '<li data-id="'+data.nav[x]['cat_id']+'"><a href="javascript:;">'+data.nav[x]['cat_name']+'</a></li>';
        //     }
        // }
        // $('.breadcrumb').html(nav_html);

        $('.file-right .file-item-dir, .breadcrumb li').click(function(event) {
            event.stopImmediatePropagation();
            var id = $(this).attr('data-id');
            if (!id) return false;
            f.dirlist($('.file-left .dd-item-'+id).find('.icon').eq(0), true);
            var datas = { 'id' : id };
            ajaxList('{:url("Material/ajax_list")}', dataList, datas );
        });
        //选择文件
        $('.file-right .file-item .item-checkbox').click(function(event) {
            //防止冒泡
            event.stopImmediatePropagation();
            $(this).toggleClass('item-checkbox-open');
            $(this).parents('.file-item').toggleClass('file-item-open');
        });

        //移动文件
        $('.file-right .file-item .item-move').click(function(event) {
            //防止冒泡
            event.stopImmediatePropagation();
            $(this).parents('.file-item').addClass('file-item-open').find('.item-checkbox').addClass('item-checkbox-open');
            f.fileoper('move');
        });

        //文件夹信息
        // var dir_html = '文件夹：<strong>'+data.dir['dir_number']+'</strong> 个&nbsp;&nbsp;&nbsp;文件数量：<strong>'+data.dir['file_number']+'</strong>个&nbsp;&nbsp;&nbsp;占用空间：<strong>'+data.dir['file_size']+'</strong>';
        // $('.dir-info').html(dir_html);

        //全选
        $('.checkbox-all').click(function() {
            if ($('.checkbox-all-open').length > 0) {
                $(this).removeClass('checkbox-all-open');
                f.checkbox();
            }else {
                $(this).addClass('checkbox-all-open');
                f.checkbox(true);
            }
        });
        $('.file-right .file-item .item-del').click(function(event) {
            event.stopImmediatePropagation();
            var id = $(this).parents('.file-item').attr('data-id');
            f.filedel(id);
        });
        //文件放大查看
        $('.file-right .file-item-file img').click(function(event) {
            event.stopImmediatePropagation();
            var imgUrl = $(this).attr('data-title');
            if (imgUrl == '' || imgUrl == undefined) return false;
            imgUrl = web_dir+'/'+imgUrl;
            imgPreview(imgUrl);
        });
    }*/

    // function get_selected_files() {
    //     var files = [];

    //     var idPre = 'id' + new Date().getTime();

    //     if (jQuery("#wrapper").is(":hidden")) {
    //         var file         = new Object();
    //         file.id          = idPre + '1';
    //         file.filepath    = jQuery("#info").val();
    //         file.preview_url = file.filepath;
    //         file.url         = file.filepath;
    //         file.name        = "";//jQuery(".filelist li .title").eq(i).html();
    //         files.push(file);
    //     } else {
    //         var number = jQuery(".filelist li").size();
    //         for (var i = 0; i < number; i++) {

    //             var file         = new Object();
    //             var $file        = jQuery(".filelist li").eq(i);
    //             file.id          = idPre + i;
    //             file.filepath    = $file.data("filepath");
    //             file.preview_url = $file.data("preview_url");//httpUrl+file.filepath;
    //             file.url         = $file.data("url");
    //             file.name        = $file.data("name");
    //             if (file.url == undefined) {
    //                 continue;
    //             } else {
    //                 files.push(file);
    //             }

    //         }
    //     }

    //     return files;
    // }
</script>
